var chartDom = document.getElementById('sleep_proportion');
var sleepProportionChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}分钟 ({d}%)'
  },
  series: [
    {
      name: '睡眠状态占比',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 48, name: 'N1期' },    // 10%
        { value: 240, name: 'N2期' },   // 50%
        { value: 96, name: 'N3期' },    // 20%
        { value: 96, name: 'REM期' }    // 20%
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        show: true,
        formatter: '{b}: {c}分钟 ({d}%)'
      }
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
option && sleepProportionChart.setOption(option);

// 从服务器获取数据
fetch('/sleep-data')
  .then(response => response.json())
  .then(data => {
    option.series[0].data = data;
    sleepProportionChart.setOption(option);
  })
  .catch(error => console.error('Error loading the sleep data:', error));
